import React, { Component } from "react";
import { Tabs } from "react-vant";
import { Swipe } from "react-vant";
import { Icon } from "react-vant";
import debounce from "../utils/debounce";
import { PullRefresh } from "react-vant";

import {
  getHotList,
  getLiveList,
  getSleepList,
  getManList,
  getTopicList,
  getHotSearch,
  getTopicSearch,
  getLiveSearch,
  getSleepSearch,
  getManSearch,
} from "../api/index";

export default class Coupe extends Component {
  state = {
    iptvalue: "",
    search: "",
    HotList: [],
    LiveList: [],
    SleepList: [],
    ManList: [],
    TopicList: [],
  };

  //获取热点数据
  gethotList() {
    getHotList({ value: this.state.search }).then((res) => {
      this.setState({
        HotList: res.data.data,
      });
    });
  }

  //获取热点数据
  gettopicList() {
    getTopicList({ value: this.state.search }).then((res) => {
      this.setState({
        TopicList: res.data.data,
      });
    });
  }

  //获取生活数据
  getliveList() {
    getLiveList({ value: this.state.search }).then((res) => {
      this.setState({
        LiveList: res.data.data,
      });
    });
  }

  //获取睡眠数据
  getsleepList() {
    getSleepList({ value: this.state.search }).then((res) => {
      this.setState({
        SleepList: res.data.data,
      });
    });
  }

  //获取男性数据
  getmanList() {
    getManList({ value: this.state.search }).then((res) => {
      this.setState({
        ManList: res.data.data,
      });
    });
  }

  //热点搜索
  getHotSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    let res = await getHotSearch({ value: this.state.iptvalue });
    this.setState({
      HotList: res.data.data,
    });
  };

  //话题搜索
  getTopicSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    let res = await getTopicSearch({ value: this.state.iptvalue });
    this.setState({
      TopicList: res.data.data,
    });
  };

  //生活搜索
  getLiveSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    let res = await getLiveSearch({ value: this.state.iptvalue });
    this.setState({
      LiveList: res.data.data,
    });
  };

  //睡眠搜索
  getSleepSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    let res = await getSleepSearch({ value: this.state.iptvalue });
    this.setState({
      SleepList: res.data.data,
    });
  };
  //男性搜索
  getManSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    let res = await getManSearch({ value: this.state.iptvalue });
    this.setState({
      ManList: res.data.data,
    });
  };

  onRefresh = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
        this.gethotList();
      }, 1000);
    });
  };

  componentDidMount() {
    this.gethotList();
    this.gettopicList();
    this.getliveList();
    this.getsleepList();
    this.getmanList();
  }

  render() {
    const { HotList, TopicList, LiveList, SleepList, ManList, iptvalue } =
      this.state;
    const images = [
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
    ];
    const images1 = [
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
    ];
    const images2 = [
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
    ];
    const images3 = [
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
    ];
    return (
      <div className="coupe">
        <input
          type="text"
          placeholder="🔍输入关键字搜索科普文章"
          value={iptvalue}
          onInput={(e) => {
            this.getHotSearch(e.target.value);
          }}
          // onInput={(e) => {
          //   this.getTopicSearch(e.target.value);
          // }}
          // onInput={(e) => {
          //   this.getLiveSearch(e.target.value);
          // }}
          // onInput={(e) => {
          //   this.getSleepSearch(e.target.value);
          // }}
          // onInput={(e) => {
          //   this.getManSearch(e.target.value);
          // }}
          className="search"
        />
        <div className="content">
          <Tabs
            active="active"
            color="rgb(66, 219, 66)"
            titleActiveColor="rgb(66, 219, 66)"
            lineWidth="45px"
          >
            <Tabs.TabPane title="热点">
              <Swipe autoplay={3000} lazy>
                {images.map((item) => (
                  <Swipe.Item key={item}>
                    <img className="swiper-lazy" src={item} alt="" />
                  </Swipe.Item>
                ))}
              </Swipe>
              <PullRefresh onRefresh={this.onRefresh}>
                {HotList.map((item, idx) => {
                  return (
                    <div className="hotList-box" key={idx}>
                      <dl className="hotList">
                        <dt>
                          <img src={item.img} alt="" />
                        </dt>
                        <dd>
                          <div>{item.title}</div>
                          <div>
                            <span>
                              {item.tag} {item.time}
                            </span>
                            <span>
                              阅读{item.read} 赞{item.praise}
                            </span>
                          </div>
                        </dd>
                      </dl>
                    </div>
                  );
                })}
              </PullRefresh>
            </Tabs.TabPane>
            <Tabs.TabPane title="话题">
              {TopicList.map((item, idx) => {
                return (
                  <div className="topicList-box" key={idx}>
                    <dl className="topicList">
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>
                      <dd>
                        <div>
                          {item.name} <span>{item.kind}</span>{" "}
                          <span>主治医师</span>
                        </div>
                        <div>
                          <span>原创</span> {item.time}
                        </div>
                      </dd>
                    </dl>
                    <div className="title">{item.title}</div>
                    <div className="info">{item.info}</div>
                    <div className="read">
                      <span>
                        <Icon name="warning-o" />
                        简答
                      </span>
                      <span>
                        阅读{item.read} 赞{item.praise}
                      </span>
                    </div>
                  </div>
                );
              })}
            </Tabs.TabPane>
            <Tabs.TabPane title="生活">
              <Swipe autoplay={3000} lazy>
                {images1.map((item) => (
                  <Swipe.Item key={item}>
                    <img className="swiper-lazy" src={item} alt="" />
                  </Swipe.Item>
                ))}
              </Swipe>
              {LiveList.map((item, idx) => {
                return (
                  <div className="liveList-box" key={idx}>
                    <dl className="liveList">
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>
                      <dd>
                        <div>{item.title}</div>
                        <div>
                          <span>
                            {item.tag} {item.time}
                          </span>
                          <span>
                            阅读{item.read} 赞{item.praise}
                          </span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </Tabs.TabPane>
            <Tabs.TabPane title="睡眠">
              <Swipe autoplay={3000} lazy>
                {images2.map((item) => (
                  <Swipe.Item key={item}>
                    <img className="swiper-lazy" src={item} alt="" />
                  </Swipe.Item>
                ))}
              </Swipe>
              {SleepList.map((item, idx) => {
                return (
                  <div className="sleepList-box" key={idx}>
                    <dl className="sleepList">
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>
                      <dd>
                        <div>{item.title}</div>
                        <div>
                          <span>{item.time}</span>
                          <span>
                            阅读{item.read} 赞{item.praise}
                          </span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </Tabs.TabPane>
            <Tabs.TabPane title="男性">
              <Swipe autoplay={3000} lazy>
                {images3.map((item) => (
                  <Swipe.Item key={item}>
                    <img className="swiper-lazy" src={item} alt="" />
                  </Swipe.Item>
                ))}
              </Swipe>
              {ManList.map((item, idx) => {
                return (
                  <div className="manList-box" key={idx}>
                    <dl className="manList">
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>
                      <dd>
                        <div>{item.title}</div>
                        <div>
                          <span>{item.time}</span>
                          <span>
                            阅读{item.read} 赞{item.praise}
                          </span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}
